<template>
  <div>

    <div class="app-container">
      <div>
        <el-form :inline="true">
          <el-form-item style="float: left" label="查询入侵记录:">
            <el-input placeholder="请输入人名..." auto-complete="off" v-model="searchKeyword"></el-input>
          </el-form-item>
          <el-form-item style="float: center">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>



      <div class="dateSelect">
        <span>日期</span>
        <el-date-picker style="margin-left: 20px;" v-model="selectedDate" type="date" placeholder="选择日期"
          @change="filterByDate" @clear="resetFilter">
        </el-date-picker>
      </div>

      <el-table v-loading="listLoading"
        :data="(selectedDate || searchKeyword) ? ((selectedDate && searchKeyword) ? mergedTableData : (searchKeyword ? filteredTableData1 : filteredTableData2)) : tableData"
        element-loading-text="Loading" border fit highlight-current-row style="margin-top: 3%;">
        <el-table-column label="序号" show-overflow-tooltip width="80">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="入侵日期">
          <template slot-scope="scope">
            {{ formatDate(scope.row.ctime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="入侵时间">
          <template slot-scope="scope">
            {{ formatTime(scope.row.ctime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="入侵人数" width="80">
          <template slot-scope="scope">
            {{ scope.row.people_num }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="熟人人数" width="80">
          <template slot-scope="scope">
            {{ scope.row.recog_num }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="熟人列表" width="200">
          <template slot-scope="scope">
            {{ scope.row.person_list }}
          </template>
        </el-table-column>
        <el-table-column label="采集图像" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.image_url }}</span>
          </template>
        </el-table-column>
        <el-table-column label="视频回放" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.video_url }}</span>
          </template>
        </el-table-column>
      </el-table>


      <!-- <div class="block" style="float: right">
        <el-pagination :current-page="this.page" :page-sizes="[10, 50, 100, 200]" :page-size="this.offset"
          layout="total, sizes, prev, pager, next, jumper" :total="this.totalNum" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div> -->
    </div>
  </div>
</template>

<script>
import { showOperateLog } from '@/api/operate-log'

export default {
  name: 'OperateLogVue',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      listLoading: false,
      selectedDate: null,
      page: 1,
      offset: 10,
      totalNum: 1000,
      searchKeyword: null,
      filteredTableData1: [],
      filteredTableData2: [],

      tableData: [
        {
          //ctime: "2023年07月13日 22时11分08秒",
          ctime: "2023-07-13T22:11:08",
          video_url: "https://kon.obs.cn-north-4.myhuaweicloud.com/vid_1689305118_4668806",
          image_url: "https://kon.obs.cn-north-4.myhuaweicloud.com/photo_1689305118_4668806",
          people_num: 1,
          person_list: "['shi']",
          recog_num: 1

        },
        {
          //ctime: "2023年07月15日 23时28分08秒",
          ctime: "2023-07-15T23:28:08",
          video_url: "https://kon.obs.cn-north-4.myhuaweicloud.com/vid_1689305118_4668806",
          image_url: "https://kon.obs.cn-north-4.myhuaweicloud.com/photo_1689305118_4668806",
          people_num: 2,
          person_list: "['niu']",
          recog_num: 1

        }
      ],
      input: ''
    }
  },
  created() {
    this.fetchData()
    this.filter()
  },
  computed: {
    mergedTableData() {
      return this.filteredTableData1.filter(item => {
        return this.filteredTableData2.some(obj => obj === item);
      });
    }
  },

  methods: {
    // filter() {
    //   const params = {
    //     page: this.page,
    //     offset: this.offset,
    //     content: this.input
    //   }
    // },
    fetchData() {
      //this.listLoading = true
      this.listLoading = false
      showOperateLog({}).then(response => {
        this.tableData = Array.from(response.data.data)
        // console.log("Data" + this.list)
        this.listLoading = false
      })
    },
    search() {
      //this.listLoading = true
      this.listLoading = false
      if (this.searchKeyword == null) {
        //this.fetchData()
        // this.filteredTableData = this.tableData;
        return
      }
      const filteredData = this.tableData.filter(item => item.person_list === this.searchKeyword);
      this.filteredTableData1 = filteredData;
    },
    // search() {
    //   //this.listLoading = true
    //   this.listLoading = false
    //   if (this.searchKeyword == "") {
    //     this.fetchData()
    //     return
    //   }
    //   getList(this.searchKeyword).then(response => {
    //     this.tableData = Array.from(response.data.data)
    //     this.listLoading = false
    //   })
    // },

    // 两个方法分别用于获取日期和时间
    formatDate(datetime) {
      const dateObj = new Date(datetime);
      const formattedDate = dateObj.toLocaleDateString(); // 提取日期部分
      return formattedDate;
    },
    formatTime(datetime) {
      const dateObj = new Date(datetime);
      const formattedTime = dateObj.toLocaleTimeString(); // 提取时分秒部分
      return formattedTime;
    },
    filterByDate() {
      if (this.selectedDate) {
        console.log(this.selectedDate)
        const filteredData = this.tableData.filter(item => {
          // 使用选定的日期进行筛选，假设记录的日期保存在 ctime 字段中
          const recordDate = this.formatDate(item.ctime);
          const selectedDate = this.formatDate(this.selectedDate);
          return recordDate === selectedDate;
        });
        this.filteredTableData2 = filteredData; // 更新筛选后的数据
      }
      // else {
      //   this.filteredTableData = this.tableData; // 没有选择日期时显示全部数据
      // }
    },
    resetFilter() {
      this.selectedDate = null; // 清空选择的日期
      this.filteredTableData2 = []; // 清空筛选后的数据，显示全部数据
    }




  }
}
</script>

<style scoped>
.input-content {
  width: 500px;
}

.search-button {
  margin-left: 100px;
}

.dateSelect {
  margin-top: 20px;
}
</style>
